import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./dataService.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  name: 'dataService',
  setup() {
    //头部数据
    const dataServiceState = ref([
      {
        value: '2000',
        unit: '年',
      },
      {
        value: '12',
        unit: '万',
      },
      {
        value: '17.5',
        unit: '万册',
      },
    ])
    const ServiceData = () => (
      <div class={styles.serviceData}>
        {
          dataServiceState.value.map((item: any) => (
            <div class={styles['serviceData-item']}>
              <div>
                <span class={styles['item-value']}>{item.value}</span>
                <span class={styles['item-label']}>{item.unit}</span>
              </div>
            </div>
          ))
        }
      </div>
    )
    //数据服务列表
    const dataServiceLists = reactive({
      tabs: [
        {
          name: '旅游社行业风险皮书',
        },
        {
          name: '旅游社服务手册',
        },
        {
          name: '导游手册',
        },
      ],
      tabsActived: 0,
      list: [],
      firstList: [
        {
          img: imgPath('/dataService/firstList-img1.png'),
          name: '2017~2021年度旅游社业风险绿皮书',
          path:''
        },
        {
          img: imgPath('/dataService/firstList-img2.png'),
          name: '2020年度旅游社业风险绿皮书',
          path:'',
        },
        {
          img: imgPath('/dataService/firstList-img3.png'),
          name: '2019年度旅游社业风险绿皮书',
          path:'',
        },
        {
          img: imgPath('/dataService/firstList-img4.png'),
          name: '2018年度旅游社业风险绿皮书',
          path:'',
        },
        {
          img: imgPath('/dataService/firstList-img5.png'),
          name: '2017年度旅游社业风险绿皮书',
          path:'',
        },
        {
          img: imgPath('/dataService/firstList-img6.png'),
          name: '2016年度旅游社业风险绿皮书',
          path:'',
        },
      ],
      secondList: [
        {
          img: imgPath('/dataService/secondList-img1.png'),
          name: '旅游社服务手册',
          path:'',
        },
      ],
      thirdList: [
        {
          img: imgPath('/dataService/thirdList-img1.png'),
          name: '导游手册',
          path:'',
        },
      ]
    } as any)

    const tabClick = (index: any) => {
      dataServiceLists.tabsActived = index;
      switch (dataServiceLists.tabsActived) {
        case 0:
          dataServiceLists.list = dataServiceLists.firstList;
          break;
        case 1:
          dataServiceLists.list = dataServiceLists.secondList;
          break;
        case 2:
          dataServiceLists.list = dataServiceLists.thirdList;
          break;
      }
      console.log(dataServiceLists.list)
    }
    onMounted( ()=>{
      dataServiceLists.list = dataServiceLists.firstList;
    })
    //数据服务列表导航栏
    const DataServiceTabs = () => (
      <div class={styles.dataServiceTabs}>
        {
          dataServiceLists.tabs.map((item: any, index: number) => (
            <div class={styles['dataServiceTabs-item']}
              onClick={() => { tabClick(index) }}
            >
              <span class={[styles.name, index === dataServiceLists.tabsActived && styles['dataServiceTabs-actived'],
              index !== dataServiceLists.tabsActived && styles['dataServiceTabs-noActived']]}
              >
                {item.name}
              </span>
            </div>
          ))
        }
      </div>
    )
    //列表
    const DataServiceList = () => (
      <div class={styles.dataServiceList}>
        {
          dataServiceLists.list.map((itemI: any) => (
            <div class={styles['dataServiceList-item']} onClick={() => window.open(itemI.path)}>
              <img src={itemI.img} />
              <div class={styles.name}>{itemI.name}</div>
            </div>
          ))
        }
      </div>
    )
    const DataServiceLists = () => (
      <div class={styles.dataServiceLists}>
        <DataServiceTabs />
        <DataServiceList />
      </div>
    )
    return () => (
      <div class={styles.dataService}>
        <div class={styles['service-content']}>
          <div class={styles['service-header']}>
            <img src={imgPath('/dataService/dataService-header.png')} />
            <p class={styles.word}>旅行社业风险皮书通过对示范项目数据深度的分析，从自然环境、社会环境、内外部风险因素、变化趋势等多维度揭示旅行社业的整体风险，通过对典型案例评析，帮助旅行社防范风险，完善事故处理流程。</p>
            <p class={styles.word}>面对日新月异的旅游业态变化，旅行社业风险管理能力提升成为当务之急。风险皮书的意义不仅仅是揭示行业风险，更重要的是凝聚共识：多样性、复杂性和长期性决定了风险治理手段必须综合化、源头化、专业化和智能化，推动行业整体风险管理水平的提升。</p>
          </div>
          <ServiceData />
          <DataServiceLists />
        </div>
      </div>
    )
  }
})